<template>
  <div class="ad-window">
    <div class="content">
      <div class="ad-container">
      <div>
        <a href="https://example.com" target="_blank">
          <img src="@/assets/images/2019030107531777.jpg" alt="广告图片">
        </a>
        <button class="close-btn" @click="closeAd">×</button>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    closeAd() {
      // 可以在这里添加关闭广告的逻辑
      this.$emit('close'); // 发送关闭事件
    }
  }
};
</script>

<style scoped>
.ad-window {
  position: fixed;
  bottom: 20px; /* 距离底部 20px */
  right: 20px; /* 距离左侧 20px */
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 0px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 9999; /* 确保在其他内容之上 */
}

.content {
  text-align: center;
}

.ad-container {
  position: relative; /* 使按钮可以相对于图片定位 */
  display: inline-block; /* 让图片和按钮在同一行 */
  width: 300px; /* 设置容器的宽度为300像素 */
  height: 150px; /* 设置容器的高度为250像素 */
  /* 其他样式 */
}

.ad-container img {
  max-width: 100%; /* 图片宽度最大50% */

  height: auto; /* 保持宽高比 */
}

.close-btn {
  position: absolute; /* 绝对定位 */
  top: 5px; /* 距离顶部 5px */
  right: 5px; /* 距离右侧 5px */
  background: transparent;
  border: none;
  font-size: 40px;
  cursor: pointer;
  z-index: 1; /* 确保在图片之上 */
  color: #000000; /* 按钮颜色 */
  padding: 0;
}
</style>
